<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>设置/获取地图中心点</title>
  </head>
  <script
    charset="utf-8"
    src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"
  ></script>
  <style type="text/css">
    html,
    body {
      height: 100%;
      margin: 0px;
      padding: 0px;
      overflow: hidden;
    }

    #container {
      position: relative;
      width: 100%;
      height: 100%;
    }
    #info {
      position: absolute;
      background: #fff;
      width: 300px;
      height: 25px;
      padding: 20px;
      z-index: 9999;
      top: 30px;
      left: 30px;
    }
    #getcenter {
      position: absolute;
      left: 20px;
      top: 10px;
    }
    #setcenter {
      position: absolute;
      left: 110px;
      top: 10px;
    }
  </style>

  <body>
    <div id="container"></div>
    <div id="info">
      <input
        type="button"
        id="getcenter"
        onclick="getCenter()"
        value="getCenter"
      />
      <input
        type="button"
        id="setcenter"
        onclick="setCenter()"
        value="setCenter"
      />
      <p id="center-info">当前地图中心为: 39.984104, 116.307503</p>
    </div>
    <script>
      var centerInfo = document.getElementById("center-info");

      var center = new TMap.LatLng(39.984104, 116.307503); //设置中心点坐标
      //初始化地图
      var map = new TMap.Map("container", {
        center: center,
      });
      //获取地图中心点事件
      function getCenter() {
        var mapCenter = map.getCenter(); //获取地图中心点坐标
        centerInfo.innerHTML =
          "当前地图中心为: " +
          mapCenter.getLat().toFixed(6) +
          "," +
          mapCenter.getLng().toFixed(6);
      }
      //设置地图中心点事件
      function setCenter() {
        map.setCenter(new TMap.LatLng(39.908802, 116.397502)); //坐标为天安门
        centerInfo.innerHTML = "当前地图中心为: 39.908802,116.397502";
      }
    </script>
  </body>
</html>
